<template>
	<div>
		<div class="answercon" v-if="code==1||code=='1'">
		<!-- <div class="answercon" v-if="code==1||code=='1'"> -->
		  <!-- 题型 -->
		  <div class="answer-top clearfix">
			  <div class="answer-top-left fl" v-if="typestr==1||typestr=='1'">【A1题型】</div>
			  <div class="answer-top-left fl" v-else-if="typestr==2||typestr=='2'">【A2题型】</div>
			  <div class="answer-top-left fl" v-else-if="typestr==3||typestr=='3'">【A3/A4题型】</div>
			  <div class="answer-top-left fl" v-else-if="typestr==4||typestr=='4'">【B1题型】</div>
			  <div class="answer-top-left fl" v-else-if="typestr==5||typestr=='5'">【B2题型】</div>
			  <div class="answer-top-right fr">{{sort}}/{{item_count}}</div>
		  </div>
		  <div class='allanswer'>
			  <!-- A1/A2题型 -->
			  <div class="answer answer-A1" v-if="typestr==1||typestr=='1'||typestr==2||typestr=='2'">
				  <div class="answer-question"><span>{{sort}}</span>.<span class="qu" v-html="itemanswer.question"></span></div>
				  <div class="answer-choose">
					  <!-- <div>{{itemanswer.result}}</div> -->
					  <div v-if="itemanswer.result==0||itemanswer.result=='0'">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
							  <div v-if="choise[index]==itemanswer.youanswer"  class="answer-every-click fl answer-back-no"></div>
							  <div v-else-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
							  <div v-else  class="answer-every-click fl">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
					  <div v-else>
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
							  <div v-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
							  <div v-else  class="answer-every-click fl">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
				  </div>
				  <!-- 答案详情 -->
					<div class="answer-detail" v-if="look">
					  <div class="answer-title">
						<p>答案详解</p>
					  </div>
					  <div class="answer-item">
						<div class="item-left">
						  正确答案：<span>{{itemanswer.answer}}</span>
						</div>
						<div class="item-right">
						  您的答案：<span>{{itemanswer.youanswer}}</span>
						</div>
					  </div>
					  <!-- 答案解析： -->
					  <div class="answer-ansy">
						<p class="answer-antitle">答案解析：</p>
						<p class="answer-andetail">{{itemanswer.analysis}}</p>
					  </div>
					</div>
				  
			  </div>
			  <!-- A3/A4题型 -->
			 <div class="answer answer-A3" v-if="typestr==3||typestr=='3'">
				 <div class="answer-big-que">{{itemanswer.stem}}</div>
				  <div class="answer-question"><span>{{sort}}</span>.<span class="qu" v-html="itemanswer.question"></span></div>
				    <div class="answer-choose">
					  <!-- <div>{{itemanswer.result}}</div> -->
					  <div v-if="itemanswer.result==0||itemanswer.result=='0'">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
							  <div v-if="choise[index]==itemanswer.youanswer"  class="answer-every-click fl answer-back-no"></div>
							  <div v-else-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
							  <div v-else  class="answer-every-click fl">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
					  <div v-else>
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
							  <div v-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
							  <div v-else  class="answer-every-click fl">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
	                </div>
	                <!-- 答案详情 -->
					<div class="answer-detail" v-if="look">
					  <div class="answer-title">
						<p>答案详解</p>
					  </div>
					  <div class="answer-item">
						<div class="item-left">
						  正确答案：<span>{{itemanswer.answer}}</span>
						</div>
						<div class="item-right">
						  您的答案：<span>{{itemanswer.youanswer}}</span>
						</div>
					  </div>
					  <!-- 答案解析： -->
					  <div class="answer-ansy">
						<p class="answer-antitle">答案解析：</p>
						<p class="answer-andetail">{{itemanswer.analysis}}</p>
					  </div>
					</div>
			  </div>
			  <!-- B1题型 -->
			  <div class="answer answer-B1" v-if="typestr==4||typestr=='4'">
				 <div class="answer-choose answer-choose-top">
					  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
						  <div class="answer-every-click fl">{{choise[index]}}</div>
						  <div class="answer-every fl" v-html="item"></div>
					  </div>
				 </div>
				  <div class="answer-question"><span>{{sort}}</span>.<span class="qu" v-html="itemanswer.question"></span></div>
				  <div class="answer-choose clearfix answer-ch-click">
					  <!-- <div class="answer-choose-every">
						  <div class="answer-every-click fl">A</div>
					  </div> -->
					  <div class="answer-choose clearfix">
					    <!-- <div>{{itemanswer.result}}</div> -->
					    <div v-if="itemanswer.result==0||itemanswer.result=='0'">
					  	  <div class="answer-choose-every fl" v-for="(item,index) in itemanswer.choices">
					  		  <div v-if="choise[index]==itemanswer.youanswer"  class="answer-every-click fl answer-back-no"></div>
					  		  <div v-else-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
					  		  <div v-else  class="answer-every-click fl">{{choise[index]}}</div>
					  	  </div>
					    </div>
					    <div v-else>
					  	  <div class="answer-choose-every fl" v-for="(item,index) in itemanswer.choices">
					  		  <div v-if="choise[index]==itemanswer.answer"  class="answer-every-click fl answer-back-yes"></div>
					  		  <div v-else  class="answer-every-click">{{choise[index]}}</div>
					  	  </div>
					    </div>
					  </div>
				  </div>
				  <!-- 答案详情 -->
				  <div class="answer-detail" v-if="look">
						<div class="answer-title">
						  <p>答案详解</p>
						</div>
						<div class="answer-item">
							<div class="item-left">
							  正确答案：<span>{{itemanswer.answer}}</span>
							</div>
							<div class="item-right">
							  您的答案：<span>{{itemanswer.youanswer}}</span>
							</div>
						</div>
						<!-- 答案解析： -->
						<div class="answer-ansy">
							<p class="answer-antitle">答案解析：</p>
							<p class="answer-andetail">{{itemanswer.analysis}}</p>
						</div>
				  </div>
			   </div>
		   </div>
			
			<!-- 返回直播页面 -->
			<div class="backzbo">
			  <div class="wrongbut bottombut" @click="submit">查看试卷结果</div>
			  <div class="backbut bottombut" @click="backzbo">返回直播间</div>
			</div>
			
			<!-- 底部 -->
			<div class="answer-bottom clearfix">
				<div class="bottom-left fl" @click="leftitem">
					<img src="../../../assets/image/left-push.png" alt="">
				</div>
				<!-- <div class="bottom-con fl" @click="lookanswer">
					<img v-if="look" src="../../../assets/image/answer_on.png" alt="">
					<img v-else src="../../../assets/image/answer.png" alt="">
					<p :class="look?'':'noansw'">看答案</p>
				</div> -->
				<div class="bottom-right fr"@click="rightitem">
					<img src="../../../assets/image/right-push.png" alt="">
				</div>
			</div>
		</div>
		<div v-else class="noanswer">暂无试题</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				choise:['A','B','C','D','E','F','G','H','I','K','L','M','N'],
				code:1,
				wrong:'',  //0全部解析   1错题解析
				test_id:'',  //试卷id
				gid:'', //班级id
				id:'',  //课程id
				sort:1, //第几题
				typestr:'',  //题型
				item_count:'',  //该试卷一共有多少题
				data:'',
				record:[],  //所有题
				itemanswer:'',  //点击中的每道题
				zbo:0,
				look:true,
				urlpath:'',
			};
		},
		methods: {
			// 点击看答案
// 			lookanswer:function(){
// 				var that = this;
// 				that.look = !that.look;
// 			},
			// 查看试卷结果
			submit:function(){
				var that = this;
				that.$router.push({
					path: '/submit?testid='+that.test_id+'&gid='+that.gid+'&zbo='+that.zbo+'&id='+that.id+'&url='+that.urlpath+'',
				})
			},
			// 返回直播间
			backzbo:function(){
				var that = this;
				if(that.zbo==0||that.zbo=='0'){
					that.$router.push({
						path: '/demand?cid='+that.gid+'&id='+that.id+'&zbo=0&answtype=1&url='+that.urlpath+'',
					})
				}else{
					that.$router.push({
						path: '/demand?cid='+that.gid+'&id='+that.id+'&zbo=1&answtype=1&url='+that.urlpath+'',
					})
				}
			},
			// 点击上一题
			leftitem:function(){
				var that = this;
				that.look = true;
				if(that.sort == 1|| that.sort == '1'){
					layer.open({
						content: '已经是第一题',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
				}else{
					that.sort = parseInt(that.sort)-1;
					that.itemanswer = that.record[parseInt(that.sort)-1];
				}
				
			},
			// 点击下一题
			rightitem:function(){
				var that = this;
				that.look = true;
				if(that.sort == that.item_count){
					layer.open({
						content: '已经是最后一题',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
				}else{
					that.itemanswer = that.record[parseInt(that.sort)];
					that.sort = parseInt(that.sort)+1;
				}
			},
			answ() {
				// 获取每道题
				var that = this;
				var thatstate = this.$store.state;
				this.axios({
					method:'GET',
					url:thatstate.url+'Xiaoqi/examResult',
					params:{
						exam_id:that.test_id,
						course_id:that.id,
					},
				})
				.then((res)=>{
					if(res.data.errcode == 0 || res.data.errcode == '0'){
						var data = res.data.data.record;
						that.data = data;
						// console.log(that.data)
						var record = JSON.parse(data.record);
						var newarr = {arr:[]};
						// console.log(record);
						for(var i=0;i<record.length;i++){
							newarr.arr.push({'youanswer':record[i].youanswer,'answer':record[i].answer})
						}
						// console.log(newarr);
						// console.log(999)
						window.sessionStorage.setItem('arr',JSON.stringify(newarr));
						// console.log(999)
						//记录题目
						window.sessionStorage.setItem('record',JSON.stringify({answer:record}));
						// console.log(999)	
						// 满分  分数线
						if(data.bak!=''){
						  window.sessionStorage.setItem('testPaper',JSON.stringify(JSON.parse(data.bak)));
						}
						// console.log(999)
						// console.log(that.wrong);
						if(that.wrong == 0 || that.wrong == '0'){
							that.record = record;
						}else{
							// console.log(999);
							// var record1 = record
							// console.log(that.record.push(9));
							for(var i =0;i<record.length;i++){
								// console.log(record[i].result)
								// result值是是否答对 0答错 1答对
								if(record[i].result == 0 ||record[i].result == '0'){
									that.record.push(record[i]);
								}
							}
							// console.log(that.record);
						}
						
						// console.log(that.record);
						if(that.sort!=1||that.sort!='1'){
							that.typestr=that.record[parseInt(that.sort)-1].type;
							that.itemanswer = that.record[parseInt(that.sort)-1];
							that.item_count = that.record.length;
						}else{
							that.typestr=that.record[0].type;
							that.itemanswer = that.record[0];
							that.item_count = that.record.length;
						}
					}
				}).catch((err)=>{
				   // console.log(err);
				})
			}
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			var that = this;
			that.id = that.$route.query.id;   //课程id
			that.gid = that.$route.query.gid;    //班级id
			that.test_id = that.$route.query.testid;    //试卷id
			that.zbo = that.$route.query.zbo;    //0回放  1直播
			that.wrong = that.$route.query.wrong;    //0回放  1直播
			that.urlpath = that.$route.query.url;
			// console.log(that.wrong);
			
			if(that.$route.query.sort){
				that.sort = parseInt(that.$route.query.sort)+1;
			}else{
				that.sort = 1;
			}
			that.answ();
		},
	}
</script>

<style scoped="scoped">
	.noanswer{
		text-align: center;
		font-size: .28rem;
		color: #333;
		margin-top: .2rem;
	}
	/* .answer-A1,.answer-A3{
		display: none;
	} */
	.answer-top{
		margin: .2rem 0 .6rem;
		font-size: .3rem;
		padding: 0 .3rem;
	}
	.answer-top-left{
		color: #FE2326;
	}
	.answer-top-right{
		color: #333333;
	}
	.answer .answer-question{
		color: #333;
		font-size: .3rem;
		padding: 0 .3rem;
	}
	.answer-every{
		color: #333;
		font-size: .3rem;
	}
	.answer-choose{
		padding: 0 .3rem;
	}
	.answer-choose-every{
		margin-top: .3rem;
	}
	.answer-every-click{
		width: .5rem;
		height: .5rem;
		border-radius:50%;
		border:1px solid #CCCCCC;
		line-height: .5rem;
		color: #333333;
		text-align: center;
		font-size: .26rem;
	}
	.answer-every{
		margin-left: .2rem;
		width: 84%;
	}
	.answer-big-que{
		background: #FFF4F4;
		padding: .3rem;
		color: #333;
		font-size: .3rem;
		margin-bottom: .4rem;
	}
	.answer-B1 .answer-choose-top{
		padding: 0.3rem !important;
		background: #FFF4F4;
		margin-bottom: .4rem;
	}
	.answer-ch-click .answer-every-click{
		margin-right: .2rem;
	}
	.answer-bottom{
		width: 100%;
		height: 1rem;
		box-shadow:0px -3px 5px 0px rgba(71,68,80,0.06);
		padding: .3rem .6rem;
		position: fixed;
		bottom: 0;
		background: #fff;
	}
	.answer-bottom .bottom-left,.answer-bottom .bottom-right{
		width: .22rem;
		height: .44rem;
	}
	.answer-bottom img{
		width: 100%;
		height:100%;
	}
	.bottom-con{
		width: 92%;
		margin:-0.1rem auto;
	}
	.bottom-con img{
		width: .35rem;
		height: .35rem;
		display: block;
		margin: auto;
		/* vertical-align: -3px; */
	}
	.bottom-con p{
		text-align: center;
		color: #3877F6;
		font-size: .24rem;
	}
	.bottom-con .noansw{
		color: #999999 !important;
	}
	.answer-back-yes{
		border: 0 !important;
		background: url(../../../assets/image/yes.png) no-repeat;
		background-size: 100%;
	}
	.answer-back-no{
		border: 0 !important;
		background: url(../../../assets/image/wrong.png) no-repeat;
		background-size: 100%;
	}
	.backzbo{
	  width: 92%;
	  height: 1rem;
	  position: fixed;
	  bottom:.98rem;
	  left: 50%;
	  margin-left: -46%;
	  display: flex;
	  justify-content: space-around;
	  background: #fff;
	}

	.bottombut{
	  width: 45%;
	  height: .68rem;
	  border-radius: .08rem;
	  text-align: center;
	  color: #fff;
	  font-size: .26rem;
	  line-height: .68rem;
	}


	.backzbo .wrongbut{
	  background: #FE2326;
	}

	.backzbo .backbut{
	  /*width: 100%;*/
	  background: #3877F6;
	  
	}
	
	/*.答案详情*/
	.answer-detail{
		width: 92%;
		margin: 1.08rem auto 0;
		/* display: none; */
		padding-bottom: 4rem;
	}

	.answer-detail .answer-title{
		width: 50%;
		margin: auto;
		border-top: 1px solid #EDEDED;
	}

	.answer-detail .answer-title p{
		width: 40%;
		margin:-.2rem auto;
		text-align: center;
		color: #333;
		font-size: .3rem;
		background: #fff;
	}

	.answer-detail .answer-item{
		margin: .5rem 0 0;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #EDEDED;
		padding-bottom: .3rem;
	}

	.answer-detail .answer-item div{
		color: #333;
		font-size: .3rem;
	}

	.answer-detail .answer-item .item-left span{
	   color: #3877F6 !important;
	}

	.answer-detail .answer-item .item-right{
		margin-left: .6rem;
	}

	.answer-detail .answer-item .item-right span{
	   color: #FE2326 !important;
	}

	/*答案解析：*/
	.answer-ansy{
		margin-top: .3rem;
	}

	.answer-ansy .answer-antitle{
		color: #333333;
		font-size: .3rem;
	}

	.answer-andetail{
		margin-top: .2rem;
		color: #999999;
		font-size: .26rem;
	}

	.answer-andetail p span{
		font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
		color: #999999 !important;
		font-size: .26rem !important;
	}

</style>
